<template>
  <a-modal
    :open="open"
    title="状态转换规则"
    width="800px"
    :footer="null"
    @cancel="handleClose"
  >
    <div class="transition-dialog">
      <div class="dialog-header">
        <div class="state-info">
          <StateTag :state="currentState" variant="default" />
          <div class="state-details">
            <div class="state-name">{{ currentState?.name }}</div>
            <div class="state-description">{{ currentState?.description }}</div>
          </div>
        </div>
        <a-button type="primary" @click="handleAddTransition">
          <template #icon>
            <Icon name="plus" />
          </template>
          添加转换规则
        </a-button>
      </div>

      <div class="transition-content">
        <a-tabs v-model:activeKey="activeTab">
          <a-tab-pane key="outgoing" tab="可转换到">
            <div class="transition-list">
              <div
                v-for="transition in outgoingTransitions"
                :key="transition.id"
                class="transition-item"
              >
                <div class="transition-info">
                  <div class="transition-flow">
                    <StateTag :state="transition.from_state" variant="outlined" />
                    <Icon name="arrow-right" class="arrow-icon" />
                    <StateTag :state="transition.to_state" variant="outlined" />
                  </div>
                  <div class="transition-details">
                    <div v-if="transition.name" class="transition-name">
                      {{ transition.name }}
                    </div>
                    <div v-if="transition.description" class="transition-description">
                      {{ transition.description }}
                    </div>
                    <div class="transition-meta">
                      <a-tag v-if="transition.is_auto" color="blue" size="small">自动</a-tag>
                      <a-tag v-if="transition.condition" color="orange" size="small">条件</a-tag>
                      <a-tag v-if="!transition.is_active" color="red" size="small">禁用</a-tag>
                    </div>
                  </div>
                </div>
                <div class="transition-actions">
                  <a-tooltip title="编辑转换规则">
                    <a-button
                      type="text"
                      size="small"
                      @click="handleEditTransition(transition)"
                    >
                      <template #icon>
                        <Icon name="edit" />
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-tooltip title="删除转换规则">
                    <a-button
                      type="text"
                      size="small"
                      danger
                      @click="handleDeleteTransition(transition)"
                    >
                      <template #icon>
                        <Icon name="delete" />
                      </template>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
              <a-empty v-if="outgoingTransitions.length === 0" description="暂无转换规则" />
            </div>
          </a-tab-pane>

          <a-tab-pane key="incoming" tab="可从转换">
            <div class="transition-list">
              <div
                v-for="transition in incomingTransitions"
                :key="transition.id"
                class="transition-item"
              >
                <div class="transition-info">
                  <div class="transition-flow">
                    <StateTag :state="transition.from_state" variant="outlined" />
                    <Icon name="arrow-right" class="arrow-icon" />
                    <StateTag :state="transition.to_state" variant="outlined" />
                  </div>
                  <div class="transition-details">
                    <div v-if="transition.name" class="transition-name">
                      {{ transition.name }}
                    </div>
                    <div v-if="transition.description" class="transition-description">
                      {{ transition.description }}
                    </div>
                    <div class="transition-meta">
                      <a-tag v-if="transition.is_auto" color="blue" size="small">自动</a-tag>
                      <a-tag v-if="transition.condition" color="orange" size="small">条件</a-tag>
                      <a-tag v-if="!transition.is_active" color="red" size="small">禁用</a-tag>
                    </div>
                  </div>
                </div>
                <div class="transition-actions">
                  <a-tooltip title="编辑转换规则">
                    <a-button
                      type="text"
                      size="small"
                      @click="handleEditTransition(transition)"
                    >
                      <template #icon>
                        <Icon name="edit" />
                      </template>
                    </a-button>
                  </a-tooltip>
                  <a-tooltip title="删除转换规则">
                    <a-button
                      type="text"
                      size="small"
                      danger
                      @click="handleDeleteTransition(transition)"
                    >
                      <template #icon>
                        <Icon name="delete" />
                      </template>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
              <a-empty v-if="incomingTransitions.length === 0" description="暂无转换规则" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <!-- 转换规则编辑对话框 -->
    <StateTransitionEditDialog
      v-model:open="editTransitionVisible"
      :transition="editingTransition"
      :states="allStates"
      @success="handleTransitionEditSuccess"
    />
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { message } from 'ant-design-vue'
import StateTag from './StateTag.vue'
import StateTransitionEditDialog from './StateTransitionEditDialog.vue'
import Icon from '@/components/ui/Icon.vue'
import { useStateStore } from '@/stores/state'
import type { StateResponse } from '@/types/state'
import type { StateTransition } from '@/api/state'

interface Props {
  open: boolean
  state: StateResponse | null
  states: StateResponse[]
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'update:open': [value: boolean]
  success: []
}>()

// 使用状态管理store
const stateStore = useStateStore()

const currentState = computed(() => props.state)
const allStates = computed(() => props.states)
const activeTab = ref('outgoing')
const transitions = ref<StateTransition[]>([])
const editTransitionVisible = ref(false)
const editingTransition = ref<StateTransition | null>(null)

// 计算属性
const outgoingTransitions = computed(() => {
  return transitions.value.filter(t => t.from_state_id === currentState.value?.id)
})

const incomingTransitions = computed(() => {
  return transitions.value.filter(t => t.to_state_id === currentState.value?.id)
})

// 监听状态变化
watch(() => props.open, (open) => {
  if (open && currentState.value) {
    loadTransitions()
  }
})

// 方法
const loadTransitions = async () => {
  if (!currentState.value) return
  
  try {
    await stateStore.fetchTransitions({
      module_type: currentState.value.module_type
    })
    transitions.value = stateStore.transitionsByFromState(currentState.value.id)
  } catch (error) {
    console.error('加载转换规则失败:', error)
    message.error('加载转换规则失败')
  }
}

const handleClose = () => {
  emit('update:open', false)
}

const handleAddTransition = () => {
  editingTransition.value = null
  editTransitionVisible.value = true
}

const handleEditTransition = (transition: StateTransition) => {
  editingTransition.value = transition
  editTransitionVisible.value = true
}

const handleDeleteTransition = (transition: StateTransition) => {
  // 实现删除转换规则逻辑
}

const handleTransitionEditSuccess = () => {
  editTransitionVisible.value = false
  loadTransitions()
  emit('success')
}
</script>

<style scoped lang="less">
.transition-dialog {
  .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    .state-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .state-details {
      .state-name {
        font-weight: 500;
        color: #262626;
        margin-bottom: 4px;
      }

      .state-description {
        font-size: 12px;
        color: #8c8c8c;
      }
    }
  }

  .transition-content {
    min-height: 400px;
  }

  .transition-list {
    .transition-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      margin-bottom: 12px;
      background: #fff;
      transition: all 0.2s;

      &:hover {
        border-color: #d9d9d9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }
    }

    .transition-info {
      flex: 1;
    }

    .transition-flow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;

      .arrow-icon {
        color: #8c8c8c;
        font-size: 16px;
      }
    }

    .transition-details {
      .transition-name {
        font-weight: 500;
        color: #262626;
        margin-bottom: 4px;
      }

      .transition-description {
        font-size: 12px;
        color: #595959;
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .transition-meta {
        display: flex;
        gap: 4px;
      }
    }

    .transition-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
  }
}
</style>